<template>
  <div class="hotelitem">
    <el-row
      v-for="(v, i) in hotelPrice"
      :key="i"
    >
      <el-col
        :span="8"
        class="pad"
      >
        <img
          :src="v.photos"
          alt=""
          @click="$router.push('/hotel/detail?id=' + v.id)"
        />
      </el-col>
      <el-col
        :span="9"
        class="pad"
      >
        <p
          class="title"
          @click="$router.push('/hotel/detail?id=' + v.id)"
        >
          {{ v.name }}
        </p>
        <span class="rich-title">{{ v.alias }}</span>
        <!-- 评分有舒适型的判断 -->
        <div
          v-if="v.hotellevel"
          class="icon"
        >
          <i
            class="iconfont iconhuangguan"
            v-for="(item, index) in v.hotellevel.level"
            :key="index"
            title="123"
          >
          </i>
        </div>
        <span class="type"> {{ v.hoteltype.name }}</span>
        <el-row>
          <el-col :span="10">
            <el-rate
              v-model="v.stars"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}分"
              class="sorce-color"
            >
            </el-rate>
          </el-col>
          <el-col :span="7">
            <span class="sorce-color">{{ v.roomCount }}</span>
            <span>条评价</span>
          </el-col>
          <el-col :span="7"><span class="sorce-color">{{ v.common_remarks }}</span>
            <span>篇游记</span>
          </el-col>
        </el-row>
        <el-col
          :span="24"
          class="position"
        >
          <i class="el-icon-location"></i>
          <span class="position-size">位于：{{ v.address }})</span>
        </el-col>
      </el-col>

      <el-col
        :span="6"
        class="pad lowprice"
      >
        <div
          class="baseprice"
          v-for="(price, index) in v.products"
          :key="index"
        >
          <span class="xiechengcolor">{{ price.name }}</span>
          <div class="cell">
            <span class="lowprice">￥{{ price.price }}</span>起
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: ["hotelPrice"],
};
</script>

<style lang="less" scoped>
.hotelitem {
  padding: 0 10px 0 0;
  img {
    cursor: pointer;
    width: 320px;
    height: 210px;
  }
}
.pad {
  margin-right: 13px;
  padding: 10px;
  :last-child {
    margin-right: 0px;
  }
}
.title {
  cursor: pointer;
  font-weight: 400;
  font-size: x-large;
  margin-bottom: 5px;
}
.rich-title {
  font-size: 16px;
  color: #666666;
  margin-bottom: 3px;
}
/deep/ .el-icon-star-on {
  font-size: 20px;
  color: #f7ba2a;
}
.sorce-color {
  color: #ff9952;
  font-size: 18px;
}
.position {
  margin-top: 6px;
}
.position-size {
  font-size: 14px;
  color: #666;
}
/deep/ .el-icon-medal {
  color: #f7ba2a;
}
.cell {
  display: flex;

  padding: 0 0 0 80px;
  .lowprice {
    color: #f7ba2a;
  }
}
.baseprice {
  border-bottom: 1px solid #ebeef5;
  padding: 5px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px;
}
.xiechengcolor {
  color: #606266;
}
.iconhuangguan {
  color: #ff9900;
}
</style>